<template>
  <div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row>
          <el-col :span="4" class="_dosash">
           <div class=" flex justify-center items-center">
            <div class="_radiusBg">
              <Icon
                icon="material-symbols-light:supervisor-account-outline" color="#7761E8" :size="43"
         />
            </div>
            <div class="px-8px text-center">
              <div class="mb-10px text-14px text-gray-400">全部人员 </div>
              <CountTo class="text-27px fontnum" :start-val="0" :end-val="totalSate.zaizhi" :duration="2600" />
              <span class="smallFont">人</span>
            </div>
           </div>

          </el-col>
          <el-col :span="3" class="_dosash">
           <div class=" flex justify-center items-center">
            <div class="_radiusBg">
              <Icon
                icon="material-symbols-light:person-check-outline" color="#7761E8" :size="43"
         />
            </div>
            <div class="px-8px text-center">
              <div class="mb-10px text-14px text-gray-400">正式员工 </div>
              <CountTo class="text-27px fontnum" :start-val="0" :end-val="totalSate.hetonggong" :duration="2600" />
              <span class="smallFont">人</span>
            </div>
           </div>

          </el-col>
          <el-col :span="3" class="_dosash">
           <div class=" flex justify-center items-center">
            <div class="_radiusBg">
              <Icon
                icon="material-symbols-light:for-you-outline" color="#7761E8" :size="43"
         />
            </div>
            <div class="px-8px text-center">
              <div class="mb-10px text-14px text-gray-400">商务外包 </div>
              <CountTo class="text-27px fontnum" :start-val="0" :end-val="totalSate.waibao" :duration="2600" />
              <span class="smallFont">人</span>
            </div>
           </div>

          </el-col>
          <el-col :span="3" class="_dosash">
           <div class=" flex justify-center items-center">
            <div class="_radiusBg">
              <Icon
                icon="material-symbols-light:person-edit-outline" color="#7761E8" :size="43"
         />
            </div>
            <div class="px-8px text-center">
              <div class="mb-10px text-14px text-gray-400">实习 </div>
              <CountTo class="text-27px fontnum" :start-val="0" :end-val="totalSate.shixi" :duration="2600" />
              <span class="smallFont">人</span>
            </div>
           </div>

          </el-col>
          <el-col :span="3" class="_dosash">
            <div class=" flex justify-center items-center">
              <div class="_radiusBg">
                <img class="w-30px" src="@/assets/svgs/waixie.svg" />
              </div>
              <div class="px-8px text-center">
                <div class="mb-10px text-14px text-gray-400">外协 </div>
                <CountTo class="text-27px fontnum" :start-val="0" :end-val="totalSate.waixie" :duration="2600" />
                <span class="smallFont">人</span>
              </div>
            </div>

          </el-col>
          <el-col :span="4" class="_dosash">
           <div class=" flex justify-center items-center">
            <div class="_radiusBg">
              <Icon
                icon="material-symbols-light:person-add-outline" color="#7761E8" :size="43"
         />
            </div>
            <div class="px-8px text-center">
              <div class="mb-10px text-14px text-gray-400">本年入职 </div>
              <CountTo class="text-27px fontnum" :start-val="0" :end-val="totalSate.bnrz" :duration="2600" />
              <span class="smallFont">人</span>
            </div>
           </div>

          </el-col>
          <el-col :span="4" class="_dosash">
           <div class=" flex justify-center items-center">
            <div class="_radiusBg">
              <Icon
                icon="material-symbols-light:person-remove-outline" color="#7761E8" :size="43"
         />
            </div>
            <div class="px-8px text-center">
              <div class="mb-10px text-14px text-gray-400">本年离职 </div>
              <CountTo class="text-27px fontnum" :start-val="0" :end-val="totalSate.bnlz" :duration="2600" />
              <span class="smallFont">人</span>
            </div>
           </div>

          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>

  <el-row class="mt-8px" :gutter="8" justify="space-between">
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="h-3">
            <span class="_blod">部门人数统计</span>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row :gutter="10">
            <el-col :span="12">
                <el-table
                width="100%"
height="280px" v-loading="loading"
                  :header-cell-style="{ 'background': '#F5F4FD', 'color': '#333' }" :data="list"
                  :show-overflow-tooltip="true" :stripe="true" highlight-current-row>
                  <el-table-column label="序号" width="60"  align="center">
                <template #default="scope">
                    <div>
                        {{ scope.$index +1 }}
                    </div>
                </template>
            </el-table-column>
                  <el-table-column label="部门名称" align="center" prop="deptName" width="110"  />
                  <el-table-column label="正式员工" align="center" prop="contractWorkerNumber" width="80" />
                  <el-table-column label="实习" align="center" prop="internsNumber" />
                  <el-table-column
label="商务外包" align="center"  prop="outsourcedPersonnelNumber"
                    :show-overflow-tooltip="true" />
                  <el-table-column label="小计" align="center" prop="total" />
                </el-table>
            </el-col>
            <el-col :span="12">
                <el-table
v-loading="loading" height="280px" 
                  :header-cell-style="{ 'background': '#F5F4FD', 'color': '#333' }" :data="nextList"
                  :show-overflow-tooltip="true" :stripe="true" highlight-current-row>
                 
<el-table-column label="序号" width="60"  align="center">
                <template #default="scope">
                    <div>
                        {{ 10 + scope.$index +1 }}
                    </div>
                </template>
            </el-table-column>
                  <el-table-column label="部门名称" align="center" prop="deptName" width="110" />
                  <el-table-column label="正式员工" align="center" prop="contractWorkerNumber" width="80" />
                  <el-table-column label="实习" align="center" prop="internsNumber" />
                  <el-table-column
label="商务外包" align="center"  prop="outsourcedPersonnelNumber"
                  />
                  <el-table-column label="小计" align="center" prop="total"  />
                </el-table>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
        <el-skeleton :loading="loading" animated>
          <el-row :gutter="10" class="mt-8px" justify="space-between">
            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-8px">
                <template #header>
                  <div class="h-3 flex justify-between items-center">
                    <span class="_blod">岗位统计</span>
                    <el-radio-group v-model="gwActive" @change="gwChange">
                      <el-radio-button value="1">全部人员</el-radio-button>
                      <el-radio-button value="2">正式员工</el-radio-button>
                      <el-radio-button value="3">商务外包</el-radio-button>
                      <el-radio-button value="4">实习</el-radio-button>
                    </el-radio-group>
                  </div>
                </template>
                <el-skeleton :loading="loading" animated>
                  <Echart :options="pieOptionsData_gw" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
            <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-8px">
                <template #header>
                  <div class="h-3 flex justify-between items-center">
                    <span class="_blod">本年入离职统计</span>
                    <el-radio-group v-model="rzActive"  @change="rzChange">
                      <el-radio-button value="1">入职</el-radio-button>
                      <el-radio-button value="2">离职</el-radio-button>
                    </el-radio-group>
                  </div>
                </template>
                <el-skeleton :loading="loading" animated>
                  <Echart :options="pieOptionsData_rz" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
          </el-row>
        </el-skeleton>

    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="h-3 flex justify-between">
            <span class="_blod">职称统计（正式）</span>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col>
                <el-skeleton :loading="loading" animated>
                  <Echart :options="pieOptionsData_zc" :height="280" />
                </el-skeleton>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
      <el-card shadow="never" class="mt-8px">
        <template #header>
          <div class="h-3 flex justify-between items-center">
            <span class="_blod">学历信息统计</span>
            <el-radio-group v-model="xlActive" @change="xlChange">
              <el-radio-button value="1">全部人员</el-radio-button>
              <el-radio-button value="2">正式员工</el-radio-button>
              <el-radio-button value="3">商务外包</el-radio-button>
              <el-radio-button value="4">实习</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col>
                <el-skeleton :loading="loading" animated>
                  <Echart :options="pieOptionsData_xl" :height="280" />
                </el-skeleton>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'

// import { useUserStore } from '@/store/modules/user'
import * as homeApi  from '@/api/home/index'
import type { WorkplaceTotal } from './types'
import { pieOptions_zc, pieOptions_gw, pieOptions_rz, pieOptions_xl } from './echarts-data'

defineOptions({ name: 'Home' })

const { t } = useI18n()
// const userStore = useUserStore()
const loading = ref(true)
// const avatar = userStore.getUser.avatar
// const username = userStore.getUser.nickname
// const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const nextList = ref([]) // 列表的数
const pieOptionsData_zc = reactive<EChartsOption>(pieOptions_zc) as EChartsOption
const pieOptionsData_gw = reactive<EChartsOption>(pieOptions_gw) as EChartsOption
const pieOptionsData_rz = reactive<EChartsOption>(pieOptions_rz) as EChartsOption
const pieOptionsData_xl = reactive<EChartsOption>(pieOptions_xl) as EChartsOption

const xlActive = ref('1')
const rzActive = ref('1')
const gwActive = ref('1')

// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  zaizhi:0,
	hetonggong:0,
	waibao:0,
	shixi:0,
	waixie:0,
	bnrz:0,
	bnlz:0,
})

const getCount = async () => {
 const res = await homeApi.homeDataApi()
  const data = {
	zaizhi:res.employeeTotalNumber,
	hetonggong:res.contractWorkerNumber,
	waibao:res.outsourcedPersonnelNumber,
	shixi:res.internsNumber,
	waixie:res.wxNumber,
	bnrz:res.yearlyJoinCount,
	bnlz:res.yearlyLeaveCount,
  }
  totalSate = data
}
/* 部门人数统计 */
const getDepartmentList = async () => {
  const res = await homeApi.getDeptDataApi()
  console.log(res)
  list.value = res.slice(0, 10);  
  nextList.value = res.length > 10 ? res.slice(10) : [];   
}

// 职称统计
const getZcAccessSource = async () => {
  const res = await homeApi.getTitleGradeApi()
  console.log(res,'职称统计')
  const data  = res.map(item => {  
  // 使用解构赋值和剩余属性（...rest）来复制其他属性  
  const { quantity, ...rest } = item;  
  // 返回一个新的对象，将 quantity 改为 value  
  return { ...rest, value: quantity };  
});  
  set(
    pieOptionsData_zc,
    'title.text',
    '职称统计'
  )
  set(
    pieOptionsData_zc,
    'legend.data',
    data.map((v) => t(v.name))
  )

  pieOptionsData_zc!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}
/* 学历改变 */
const gwChange = (val: string) => {

  getGwAccessSource()
}
// 岗位统计
const getGwAccessSource = async () => {
  const res = await homeApi.getJobCategoryApi(gwActive.value)
  console.log(res,'岗位统计')
  const data  = res.map(item => {  
  // 使用解构赋值和剩余属性（...rest）来复制其他属性  
  const { quantity, ...rest } = item;  
  // 返回一个新的对象，将 quantity 改为 value  
  return { ...rest, value: quantity };  
});  
  set(
    pieOptionsData_gw,
    'title.text',
    '岗位统计'
  )
  set(
    pieOptionsData_gw,
    'legend.data',
    data.map((v) => t(v.name))
  )

  pieOptionsData_gw!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}
/* 入离职改变 */
const rzChange = () => {
 
  getRzAccessSource()
}
// 入离职统计
const getRzAccessSource = async () => {
 const res = await homeApi.getEmployeApi(rzActive.value)
 console.log(res)
 const data  = res.map(item => {  
 // 使用解构赋值和剩余属性（...rest）来复制其他属性  
 const { quantity, ...rest } = item;  
 // 返回一个新的对象，将 quantity 改为 value  
 return { ...rest, value: quantity };  
});  
  set(
    pieOptionsData_rz,
    'title.text',
    '入离职统计'
  )
  set(
    pieOptionsData_rz,
    'legend.data',
    data.map((v) => t(v.name))
  )

  pieOptionsData_rz!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}
/* 学历改变 */
const xlChange = (val: string) => {
 
  getXlAccessSource()
}
// 学历统计
const getXlAccessSource = async () => {
  const res = await homeApi.getEducationApi(xlActive.value)
  console.log(res)
  const data  = res.map(item => {  
  // 使用解构赋值和剩余属性（...rest）来复制其他属性  
  const { quantity, ...rest } = item;  
  // 返回一个新的对象，将 quantity 改为 value  
  return { ...rest, value: quantity };  
});  
  set(
    pieOptionsData_xl,
    'title.text',
    '学历信息统计'
  )
  set(
    pieOptionsData_xl,
    'legend.data',
    data.map((v) => t(v.name))
  )

  pieOptionsData_xl!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}
const getAllApi = async () => {
  await Promise.all([
    getCount(),
    getDepartmentList(),
    getZcAccessSource(),
    getXlAccessSource(),
    getRzAccessSource(),
    getGwAccessSource()
  ])
  loading.value = false
}

getAllApi()
</script>
<style scoped>
._dosash {
  border-right: 1px solid #eee;
}
._radiusBg{
  background: #f6f6f6;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.smallFont {
  font-size: 12px;
  margin-left: 5px;
  color: #999;
}
._blod{
  font-weight: bold;
}
</style>
